<template>
  <view class="work-contant">

    <view class="seach-box">
      <view class="input-item flex align-center">
        <view class="iconfont icon-sousuo icon"></view>
        <input class="input" v-model="targetOrTypeName" @confirm="searchHandler" type="text" maxlength="30" />
        <!-- 清空按钮 -->
        <view class="clean-symbol" v-if="targetOrTypeName" @click="clearInput">×</view>
      </view>
      <view class="seach-btn">
        <button type="default" @click="searchHandler">
          搜索
        </button>
      </view>
    </view>

    <view class="content">
      <!-- 标签内容 -->
      <view class="tar-contant">
        <view class="tar-item" v-for="(item, index) in targetData">
          <image :src="item.tagCoverUrl" mode="scaleToFill" @click="opentTargetTab(item.id)" />
          <text @click="opentTargetTab(item.id)">
            {{ item.tagName }}
          </text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import { listTag } from '@/api/work/work'
export default {
  data() {
    return {
      typeData: undefined,
      targetData: undefined,

      targetOrTypeName: undefined,

      loadTagData: {
        tagName: undefined,
        loadCount: 18
      }
    }
  },

  onLoad: function (option) {
    this.handleListTag()
  },

  onPullDownRefresh() {
    console.log('refresh');
    this.handleListTag()
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },

  onReachBottom() {
    // console.log('页面触底');
    this.loadTagData.loadCount += 3
    // 查询数据
    this.handleListTag()
  },

  methods: {
    // 清空方法
    clearInput() {
      // 将输入框的值设置为空
      this.targetOrTypeName = ''
      // 查询数据
      this.handleListTag()
    },

    searchHandler() {
      console.log('点击搜索 查询条件 ', this.targetOrTypeName)
      this.handleListTag()
    },

    handleListTag() {
      this.loadTagData.tagName = this.targetOrTypeName
      listTag(this.loadTagData).then(res => {
        // this.targetData = res.data.map(item => item.tagName)
        this.targetData = res.data
      })
    },

    opentTargetTab(id) {
      console.log('打开对应标签', id);
      uni.navigateTo({
        url: '/pages/media/media?tagetId=' + id
      });
    }
  }
}
</script>

<style lang="scss">
.work-contant {

  .content {
    display: flex;

    .tar-contant {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      text-align: center;

      .tar-item {
        width: 235rpx;
        margin: 4px;

        image {
          height: 120px;
          width: 100%;
          border-radius: 10%;
        }
      }
    }
  }

  .seach-box {
    display: flex;

    /* #ifdef MP-WEIXIN */
    margin-top: 65px;
    /* #endif */

    /* #ifdef APP-IOS */
    margin-top: 0px;
    /* #endif */
    margin-left: 10px;
    margin-right: 10px;

    .input-item {
      width: 80%;
      margin: 20px auto;
      background-color: #f5f6f7;
      height: 45px;
      border-radius: 20px;
      margin-right: 5px;
      /* background-color: red; */

      .icon {
        font-size: 38rpx;
        margin-left: 10px;
        color: #999;
      }

      .input {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        text-align: left;
        padding-left: 15px;
      }

      .clean-symbol {
        font-size: 18px;
        margin-right: 15px;
      }
    }

    .seach-btn {
      border-radius: 30px;
      margin: 20px auto;
      margin-left: 10px auto;
      width: 20%;
      font-size: 14px;
      text-align: center;
      background-color: #f5f6f7;
    }
  }

}
</style>